<template>
<div>
  <transition
      enter-active-class="animate__animated animate__backInLeft "
      leave-active-class="animate__animate animate__backOutLeft">
    <button v-if="this.skin === 'light'" id="setSkin" @click="setSkin">
      <span>深</span>
    </button>
  </transition>
  <transition
      enter-active-class="animate__animate animate__backInLeft "
      leave-active-class="animate__animate animate__backOutLeft">
    <button v-if="this.skin === 'dark'" id="setSkin" @click="setSkin">
      <span>浅</span>
    </button>
  </transition>


</div>
</template>

<script>
//import 'animate.css';
export default {
  name:'QieHuan',
  data(){
    return{
      skin:'light',
    }
  },
  methods:{
    setSkin(){
      let val = ''
      if (this.skin === 'dark'){ //浅色模式
        val = 'light'
      }else {
        val = 'dark'
      }
      this.skin = val
      document.getElementById("theme").href =`./css/theme/${val}.css`;
    }
  },
  mounted() {
    let  link =document.createElement("link");
    link.type = "text/css";
    link.id="theme";
    link.rel ="stylesheet";
    link.href = `./css/theme/${this.skin}.css`;
    document.getElementsByTagName("head")[0].appendChild(link);
  }
}
</script>

<style>
#setSkin{
  height: 40px;
  width: 40px;
  background-color: aqua;
  border-radius: 10px;
  position: fixed;
  top: 100px;
  left: 40px;
}
</style>